<template>
  <el-card shadow="hover">
    <div v-if="todoListCount">
      <div v-for="item in showTodoList" :key="item.id" class="yc-da yc-jc-between yc-text-grey-1 yc-fs-14 yc-el-border yc-py-5 yc-px-10 yc-mb-10">
        <div class="yc-da">
          <el-checkbox v-model="item.finished" @change="handleCheckItem(item)" />
          <div
            title="fdsfdsdfdsfdsfdfdfd"
            class="yc-ml-10 yc-text-ellipsis yc-w-380"
          >
            {{item.name}}
          </div>
        </div>
        <el-button type="text" @click="handleDeleteItem(item)">删除</el-button>
      </div>
    </div>
    <div v-else class="yc-text-center yc-text-grey-2 yc-mb-10">
      暂&nbsp;无&nbsp;事&nbsp;项&nbsp;!
    </div>
    <Footer />
  </el-card>
</template>
<script>
import {mapGetters,mapMutations} from 'vuex'
import Footer from "../Footer";
export default {
  components: { Footer },
  data() {
    return {};
  },
  computed: {
    ...mapGetters(['showTodoList','todoListCount'])
  },
  methods: {
    ...mapMutations(['changeItem','deleteItem']),
    // 修改状态
    handleCheckItem(item) {
      this.changeItem(item.id)
    },
    // 删除
    handleDeleteItem(item) {
      this.deleteItem(item.id)
      this.$message.success('删除成功!')
    }
  }
};
</script>